<template>
	<div class="f-header">
		<span class="logo">
			<el-icon class="mr-1">
				<eleme-filled />
			</el-icon>
			飞天商城
		</span>
		<el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
			<fold v-if="$store.state.asideWidth == '250px'" />
			<Expand v-else />
		</el-icon>
		<el-tooltip effect="dark" content="刷新" placement="bottom">
			<el-icon class="icon-btn" @click="handleRefresh">
				<refresh />
			</el-icon>
		</el-tooltip>

		<div class="ml-auto flex items-center">
			<el-tooltip effect="dark" content="全屏" placement="bottom">
				<el-icon class="icon-btn" @click="toggle">
					<full-screen v-if="!isFullscreen" />
					<aim v-else />
				</el-icon>
			</el-tooltip>

			<el-dropdown class="dropdown" @command="handleCommand">
				<span class="flex items-center text-light-50">
					<el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
					{{ $store.state.user.username }}
					<el-icon class="el-icon--right">
						<arrow-down />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
						<el-dropdown-item command="logout">退出登录</el-dropdown-item>

					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>

	</div>



	<form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
		<el-form ref="formRef" :rules="rules" :model="form" lable-width="80px" size="small">
			<el-form-item prop="oldpassword" lable="旧密码">
				<el-input v-model="form.oldpassword" placeholder="请输入旧密码">
				</el-input>
			</el-form-item>

			<el-form-item prop="password" lable="新密码">
				<el-input type="password" v-model="form.password" placeholder="请输入新密码" show-password>
				</el-input>
			</el-form-item>

			<el-form-item prop="repassword" lable="确认密码">
				<el-input type="password" v-model="form.repassword" placeholder="请输入确认密码" show-password></el-input>
			</el-form-item>
		</el-form>
	</form-drawer>

</template>

<script setup>
	import FormDrawer from "~/components/FormDrawer.vue";
	import {
		useFullscreen
	} from '@vueuse/core'
	import {
		useRepassword,
		useLogout
	} from "~/composables/useManager";
	const {
		//是否全屏状态
		isFullscreen,
		//切换全屏
		toggle
	} = useFullscreen()

	const {
		formDrawerRef,
		form,
		rules,
		formRef,
		onSubmit,
		openRePasswordForm
	} = useRepassword()

	const {
		handleLogout
	} = useLogout()

	const handleCommand = (c) => {
		switch (key) {
			case "logout":
				handleLogout()
				break;
			case "rePassword":
				openRePasswordForm()
				break;
		}
	}

	//刷新
	const handleRefresh = () => location.reload()
</script>

<style>
	.f-header {
		@apply flex items-center bg-indigo-500 text-light-50 fixed top-0 left-0 right-0;
		height: 64px;
		z-index: 1000;
	}

	.logo {
		width: 250px;
		@apply flex justify-center items-center text-xl font-thin;
	}

	.icon-btn {
		@apply flex justify-center items-center;
		width: 42px;
		height: 64px;
		cursor: pointer;
	}

	.icon-btn:hover {
		@apply flex bg-indigo-600 justify-center items-center;
		width: 42px;
		height: 64px;
		cursor: pointer;
	}

	.f-header .dropdown {
		height: 64px;
		cursor: pointer;
		@apply flex justify-center items-center mx-5;
	}
</style>